<template>
    <el-table :data="tableData" stripe border style="width: 100%" height="500" @row-click="getSelectRowFun"
        setCurrentRow>
        <el-table-column fixed type="index" width="60" />
        <el-table-column fixed type="selection" width="65" />
        <el-table-column fixed prop="value1" label="列显名称" width="120">
            <template #default="scope">
                <el-input v-model="scope.row.value1" v-if="scope.row.isShow" :placeholder="value1" />
            </template>
        </el-table-column>
        <el-table-column fixed prop="value2" label="列名" width="120">
            <template #default="scope">
                <el-input v-model="scope.row.value2" v-if="scope.row.isShow" :placeholder="value2" />
            </template>
        </el-table-column>
        <el-table-column prop="value3" label="主键" width="110">
            <template #default="scope">
                <el-switch v-if="scope.row.isShow" v-model="scope.row.isSwitch"/>
            </template>
        </el-table-column>
        <el-table-column prop="value4" label="是否排序" width="110"><template #default="scope">
                <el-switch v-model="scope.row.value4"/>
            </template></el-table-column>
        <el-table-column prop="value5.label" label="app列" width="150"><template #default="scope">
                <el-select v-if="scope.row.isShow" class="m-2" placeholder="app列" size="large" v-model="scope.row.value5.label" @change="change">
                    <el-option v-for="item in scope.row.value5" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </template></el-table-column>
        <el-table-column prop="value6" label="查询行" width="150"><template #default="scope">
                <el-input v-model="scope.row.value6" v-if="scope.row.isShow" placeholder="查询行" />
            </template></el-table-column>
        <el-table-column prop="value7" label="查询列" width="150"><template #default="scope">
                <el-input v-model="scope.row.value7" v-if="scope.row.isShow" placeholder="查询列" />
            </template></el-table-column>
        <el-table-column prop="value8.label" label="查询类型" width="150"><template #default="scope">
                <el-select v-if="scope.row.isShow" v-model="scope.row.value8.label" class="m-2" placeholder="查询类型" size="large">
                    <el-option v-for="item in scope.row.value8" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </template></el-table-column>
        <el-table-column prop="value9" label="编辑行" width="150"><template #default="scope">
                <el-input v-model="scope.row.value9" v-if="scope.row.isShow" placeholder="编辑行" />
            </template></el-table-column>
        <el-table-column prop="value10" label="编辑列" width="150"><template #default="scope">
                <el-input v-model="scope.row.value10" v-if="scope.row.isShow" placeholder="编辑列" />
            </template></el-table-column>
        <el-table-column prop="value11.label" label="编辑类型" width="150"><template #default="scope">
                <el-select v-if="scope.row.isShow" v-model="scope.row.value11.label" class="m-2" placeholder="编辑类型" size="large">
                    <el-option v-for="item in scope.row.value11" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </template></el-table-column>
        <el-table-column prop="value12.label" label="数据源" width="150"><template #default="scope">
                <el-select v-if="scope.row.isShow" v-model="scope.row.value12.label" class="m-2" placeholder="数据源" size="large">
                    <el-option v-for="item in scope.row.value12" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </template></el-table-column>
        <el-table-column prop="value13.label" label="table列显示类型" width="150"><template #default="scope">
                <el-select v-if="scope.row.isShow" v-model="scope.row.value13.label" class="m-2" placeholder="table列显示类型" size="large">
                    <el-option v-for="item in scope.row.value13" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </template></el-table-column>
        <el-table-column prop="value14" label="列显示顺序" width="150"><template #default="scope">
                <el-input v-model="scope.row.value14" v-if="scope.row.isShow" :placeholder="value14" />
            </template></el-table-column>
        <el-table-column prop="value15" label="字段最大长度" width="150"><template #default="scope">
                <el-input v-model="scope.row.value15" v-if="scope.row.isShow" :placeholder="value15" />
            </template></el-table-column>
        <el-table-column prop="value16" label="数据类型" width="150"><template #default="scope">
                <el-input v-model="scope.row.value16" v-if="scope.row.isShow" :placeholder="value16" />
            </template></el-table-column>
        <el-table-column prop="value17" label="可为空" width="150"><template #default="scope">
                <el-switch v-model="scope.row.value17"/>
            </template></el-table-column>
        <el-table-column prop="value18" label="是否只读" width="150"><template #default="scope">
                <el-switch v-model="scope.row.value18"/>
            </template></el-table-column>
        <el-table-column prop="value19" label="数据列" width="150"><template #default="scope">
                <el-switch v-model="scope.row.value19"/>
            </template></el-table-column>
        <el-table-column prop="value20" label="是否显示" width="150"><template #default="scope">
                <el-switch v-model="scope.row.value20"/>
            </template></el-table-column>
        <el-table-column prop="value21" label="table列宽度" width="150"><template #default="scope">
                <el-input v-model="scope.row.value21" v-if="scope.row.isShow" :placeholder="value21" />
            </template></el-table-column>
        <el-table-column prop="value22" label="编辑列标签宽度colSize" width="190"><template #default="scope">
                <el-input v-model="scope.row.value22" v-if="scope.row.isShow" placeholder="编辑列标签宽度colSize" />
            </template></el-table-column>
        <el-table-column prop="value23" label="创建时间" width="150" show-overflow-tooltip />
    </el-table>
</template>

<script setup>
import { getCurrentInstance, ref} from 'vue';
const tableData = ref([])
let $this = getCurrentInstance();
let $bus = $this.appContext.config.globalProperties.$bus
const getSelectRowFun = (rows) => {
    tableData.value.forEach(r=>r.isShow=false)
    rows.isShow = true
    if (!rows.isSwitch3 ){
        rows.value3 = '是'
    }else{
        rows.value3 = '否'
    }
}


$bus.on('tableDataList', (val) => {
    tableData.value = val;
})
</script>

<style lang='scss' scoped>

</style>